import { SetupContext, computed, toRefs } from 'vue'
import { ButtonEmit, ButtonProps } from '../button-types'

export default function (props: ButtonProps, ctx: SetupContext<ButtonEmit>) {
  const { type } = toRefs(props)
  const isDisabled = computed(() => !!props.disabled)
  const rounded = computed(() => (props.round ? props.round + 'px' : ''))
  const width = computed(() => (props.width ? props.width + 'px' : ''))
  const height = computed(() => (props.height ? props.height + 'px' : ''))
  const clickHandle = (event: MouseEvent) => {
    !isDisabled.value && ctx.emit('click', event)
  }
  return {
    type,
    isDisabled,
    rounded,
    width,
    height,
    clickHandle
  }
}
